<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text对象演示文档</title>
    <style>
        #container {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="container">
    <form action="" name="form1">
        <label for="text1">一个文本输入框</label>
        <input type="text" id="text1" name="inputVal" onfocus="fun()" onchange="showText()" onselect="alert('nihao')">
        <input type="button" value="聚焦" onclick="setFocus()">
        <input type="button" value="失焦" onclick="clearFocus()">
        <input type="button" value="获取文本内容" onclick="selectVal()">
    </form>
    <div id="demo">这里:</div>
</div>
<script>
    function fun() {
        document.form1.inputVal.value = 'love';
    }
    function showText() {
        var val = document.getElementById("text1").value;
        document.getElementById("demo").innerHTML = "你输入的是: " + val;
    }

    function setFocus() {
        document.form1.inputVal.focus();
    }

    function clearFocus() {
        document.form1.inputVal.blur();
        document.form1.inputVal.value = '';

    }

    function selectVal() {
        document.form1.inputVal.select();
    }
</script>
</body>
</html>
